<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import $api from '@/api/api'
import { Search, InfoFilled, Document } from '@element-plus/icons-vue'

// 搜索表单数据
const searchForm = reactive({
  pageNum: 1,
  pageSize: 10,
  author: '',
  ISBN: '',
  publisher: '',
  bname: ''
})

// 表格数据
const tableData = ref([])
const total = ref(0)
const loading = ref(false)

// 控制详情对话框
const detailDialogVisible = ref(false)
const currentBook = ref(null)
const loadingDetail = ref(false)

// 获取图书列表
const fetchBooks = async () => {
  loading.value = true
  try {
    const res = await $api.getUserBookList(searchForm)
    if (res.code === 1) {
      tableData.value = res.data.records
      total.value = res.data.total
    } else {
      ElMessage.error(res.msg || '获取图书列表失败')
    }
  } catch (error) {
    ElMessage.error('获取图书列表失败')
  } finally {
    loading.value = false
  }
}

// 查看图书详情
const handleViewDetail = async (id) => {
  detailDialogVisible.value = true
  loadingDetail.value = true
  try {
    const res = await $api.getBookByID(id)
    if (res.code === 1) {
      currentBook.value = res.data
    } else {
      ElMessage.error(res.msg || '获取图书详情失败')
    }
  } catch (error) {
    ElMessage.error('获取图书详情失败')
  } finally {
    loadingDetail.value = false
  }
}

// 处理分页变化
const handlePageChange = (page) => {
  searchForm.pageNum = page
  fetchBooks()
}

// 处理每页条数变化
const handleSizeChange = (size) => {
  searchForm.pageSize = size
  searchForm.pageNum = 1
  fetchBooks()
}

// 处理搜索
const handleSearch = () => {
  searchForm.pageNum = 1
  fetchBooks()
}

// 重置搜索
const handleReset = () => {
  searchForm.author = ''
  searchForm.ISBN = ''
  searchForm.publisher = ''
  searchForm.bname = ''
  handleSearch()
}

onMounted(() => {
  fetchBooks()
})
</script>

<template>
  <div class="book-search-page">
    <!-- 搜索区域 -->
    <el-card class="search-card" shadow="hover">
      <div class="search-card-bg"></div>
      <el-form :model="searchForm" inline class="search-form">
        <el-form-item label="书名">
          <el-input v-model="searchForm.bname" placeholder="请输入书名" clearable class="round-input" />
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="searchForm.author" placeholder="请输入作者" clearable class="round-input" />
        </el-form-item>
        <el-form-item label="ISBN">
          <el-input v-model="searchForm.ISBN" placeholder="请输入ISBN" clearable class="round-input" />
        </el-form-item>
        <el-form-item label="出版社">
          <el-input v-model="searchForm.publisher" placeholder="请输入出版社" clearable class="round-input" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" :icon="Search" class="search-btn">
            搜索
          </el-button>
          <el-button @click="handleReset" class="reset-btn">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 图书列表 -->
    <el-card class="book-list-card" shadow="hover">
      <el-table
          :data="tableData"
          v-loading="loading"
          border
          stripe
          style="width: 100%"
          class="book-table"
      >
        <el-table-column prop="bname" label="书名" min-width="150" />
        <el-table-column prop="author" label="作者" min-width="120" />
        <el-table-column prop="isbn" label="ISBN" min-width="120" />
        <el-table-column prop="publisher" label="出版社" min-width="120" />
        <!-- <el-table-column prop="place" label="存放位置" min-width="100" />
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 1 ? 'success' : row.status === 0 ? 'warning' : 'danger'" class="status-tag">
              {{ row.status === 1 ? '可借' : row.status === 0 ? '借出' : '注销' }}
            </el-tag>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button
                type="primary"
                link
                :icon="InfoFilled"
                @click="handleViewDetail(row.id)"
                class="detail-btn"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
            v-model:current-page="searchForm.pageNum"
            v-model:page-size="searchForm.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            layout="total, sizes, prev, pager, next, jumper"
            background
        />
      </div>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog
        v-model="detailDialogVisible"
        title="图书详情"
        width="60%"
        class="book-detail-dialog"
    >
      <div class="dialog-gradient"></div>
      <div v-loading="loadingDetail">
        <div v-if="currentBook" class="book-detail">
          <div class="detail-header">
            <h2>{{ currentBook.bname }}</h2>
            <el-tag>{{ currentBook.isbn }}</el-tag>
          </div>

          <div class="detail-content">
            <div class="detail-item">
              <span class="label">作者：</span>
              <span>{{ currentBook.author }}</span>
            </div>
            <div class="detail-item">
              <span class="label">出版社：</span>
              <span>{{ currentBook.publisher }}</span>
            </div>
            <div class="detail-item">
              <span class="label">出版日期：</span>
              <span>{{ currentBook.pubDate }}</span>
            </div>
            <div class="detail-item">
              <span class="label">分类号：</span>
              <span>{{ currentBook.clcNum }}</span>
            </div>
            <div class="detail-item full-width">
              <span class="label">简介：</span>
              <p class="introduction">{{ currentBook.introduction }}</p>
            </div>
          </div>

          <div class="copies-section" v-if="currentBook.bookCopies">
            <h3>馆藏信息</h3>
            <el-table :data="currentBook.bookCopies" border stripe class="copies-table">
              <el-table-column prop="barCode" label="条形码" />
              <el-table-column prop="place" label="存放位置" />
              <el-table-column label="状态">
                <template #default="{ row }">
                  <el-tag :type="row.status === 1 ? 'success' : row.status === 0 ? 'warning' : 'danger'" class="status-tag">
                    {{ row.status === 1 ? '可借' : row.status === 0 ? '借出' : '注销' }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.book-search-page {
  padding: 24px 10px 32px 10px;
  min-height: 100vh;
  background: linear-gradient(120deg, #e4ecfb 0%, #f5f7fa 100%);
  position: relative;
}

.search-card {
  margin-bottom: 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 24px rgba(120, 120, 200, 0.10);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s;
}
.search-card:hover {
  box-shadow: 0 12px 36px rgba(120, 120, 200, 0.16);
}
.search-card-bg {
  position: absolute;
  top: -40px;
  right: -60px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, #a3bffa33 0%, #fff0 80%);
  z-index: 1;
  pointer-events: none;
  filter: blur(2px);
  animation: floatGlow 6s ease-in-out infinite alternate;
}
@keyframes floatGlow {
  0% { right: -60px; opacity: 0.7; }
  100% { right: 0px; opacity: 1; }
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  padding: 16px 0 10px 0;
  position: relative;
  z-index: 2;
}
.round-input .el-input__wrapper {
  border-radius: 24px !important;
  background: #f7faff;
  box-shadow: 0 2px 8px #e4ecfb22;
  transition: box-shadow 0.2s;
}
.round-input .el-input__wrapper:focus-within {
  box-shadow: 0 4px 16px #a3bffa33;
}
.search-btn {
  border-radius: 20px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px #a3bffa22;
  transition: background 0.2s, box-shadow 0.2s;
}
.search-btn:hover {
  background: linear-gradient(90deg, #764ba2 0%, #667eea 100%);
  box-shadow: 0 4px 16px #a3bffa33;
}
.reset-btn {
  border-radius: 20px;
  margin-left: 8px;
}

.book-list-card {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 6px 28px rgba(120, 120, 200, 0.10);
  margin-bottom: 20px;
  transition: box-shadow 0.3s;
}
.book-list-card:hover {
  box-shadow: 0 12px 36px rgba(120, 120, 200, 0.16);
}

.book-table {
  margin: 12px 0 0 0;
  border-radius: 12px;
  overflow: hidden;
  font-size: 15px;
}
.book-table :deep(.el-table__header th) {
  background: linear-gradient(90deg, #f7faff 60%, #e4ecfb 100%);
  color: #5a5a7a;
  font-weight: 700;
  font-size: 15px;
}
.book-table :deep(.el-table__row) {
  transition: background 0.2s;
}
.book-table :deep(.el-table__row:hover) {
  background: #f0f4ff;
}
.status-tag {
  font-size: 13px;
  border-radius: 12px !important;
  padding: 0 12px;
  font-weight: 600;
  letter-spacing: 1px;
}
.detail-btn {
  font-weight: 600;
  color: #667eea;
  transition: color 0.2s;
}
.detail-btn:hover {
  color: #764ba2;
}

.pagination-container {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}
.pagination-container :deep(.el-pagination) {
  border-radius: 16px;
  background: #f7faff;
  padding: 8px 18px;
  box-shadow: 0 2px 8px #e4ecfb22;
}

.book-detail-dialog :deep(.el-dialog__body) {
  padding: 24px 30px 20px 30px;
  background: #f7faff;
  border-radius: 0 0 18px 18px;
  position: relative;
}
.dialog-gradient {
  position: absolute;
  top: 0; left: 0; right: 0; height: 8px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 18px 18px 0 0;
  z-index: 2;
}
.book-detail {
  padding: 18px 0 0 0;
}
.detail-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}
.detail-header h2 {
  margin: 0;
  color: #303133;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 1px;
}
.detail-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 32px;
  margin-bottom: 28px;
}
.detail-item {
  display: flex;
  align-items: flex-start;
  font-size: 15px;
}
.detail-item.full-width {
  grid-column: 1 / -1;
}
.label {
  color: #667eea;
  font-weight: bold;
  margin-right: 10px;
  min-width: 80px;
}
.introduction {
  margin: 0;
  color: #606266;
  line-height: 1.7;
  background: #f0f4ff;
  border-radius: 8px;
  padding: 8px 12px;
}
.copies-section {
  margin-top: 24px;
}
.copies-section h3 {
  margin-bottom: 12px;
  color: #303133;
  font-size: 18px;
  font-weight: 700;
}
.copies-table {
  margin-top: 8px;
  border-radius: 10px;
  overflow: hidden;
}
.copies-table :deep(.el-table__header th) {
  background: #f7faff;
  color: #5a5a7a;
  font-weight: 600;
}
.copies-table :deep(.el-table__row:hover) {
  background: #f0f4ff;
}

/* 响应式布局 */
@media (max-width: 900px) {
  .detail-content {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .book-detail-dialog :deep(.el-dialog__body) {
    padding: 16px 6px 10px 6px;
  }
}
@media (max-width: 768px) {
  .search-card, .book-list-card {
    border-radius: 10px;
    margin-bottom: 12px;
  }
  .book-table {
    font-size: 13px;
  }
  .detail-header h2 {
    font-size: 18px;
  }
  .copies-section h3 {
    font-size: 15px;
  }
  .pagination-container {
    margin-top: 10px;
  }
}
</style>
